<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebView Template</title>
    <style>
      html,
      body {
        margin: 0px;
        padding: 0px;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        box-sizing: border-box;
      }

      iframe#androidWebViewIFrame {
        border: 0px;
        width: 100%;
        height: 100%;
      }

      @keyframes changeLoadWidth {
        form {
          width: 144px;
        }

        to {
          width: 200px;
        }
      }
    </style>

    <script>
      /**
       * 点击系统按钮，调用后退方法
       */
      function _androidGoBackBySystemButton(go = -1) {
        const iframe = document.querySelector("#androidWebViewIFrame");
        iframe.contentWindow;
        const _win = iframe.contentWindow || window;

        if (go === 0) {
          _win.location.reload();
          return true;
        }
        const position = _win.history.state.position + go;
        if (position > _win.history.length) {
          _androidSystemToast("已经到达最顶层！");
          return false;
        }
        if (position <= 0) {
          _androidSystemToast("已经退到最低层！");
          return false;
        }
        _win.history.go(go);
        return true;
      }
      let _androidSystemToastTimeoutId;
      function _androidSystemToast(msg) {
        clearTimeout(_androidSystemToastTimeoutId);
        const el = document.querySelector(
          ".android-system-toast-box #android-text-info"
        );
        el.innerText = msg;
        _androidSystemToastTimeoutId = setTimeout(() => {
          clearTimeout(_androidSystemToastTimeoutId);
          const elBox = document.querySelector(".android-system-toast-box");
          elBox.style.display = "flex";
          _androidSystemToastTimeoutId = setTimeout(() => {
            elBox.style.display = "none";
            clearTimeout(_androidSystemToastTimeoutId);
          }, 2000);
        }, 200);
      }
    </script>

    <!-- toast 样式 -->
    <style>
      .android-system-toast-box {
        justify-content: center;
        width: 100%;
        position: absolute;
        bottom: 100px;
        display: none;
        box-sizing: border-box;
        padding: 0px 10%;
      }
      .android-system-toast-box #android-text-info {
        background: #000;
        width: auto;
        color: #fff;
        padding: 10px 22px;
        text-align: left;
        font-size: 12px;
        border-radius: 6px;
        box-shadow: 2px 2px 1px #cfcfcf;
        line-height: 20px;
      }
    </style>
  </head>

  <body>
    <iframe
      id="androidWebViewIFrame"
      name="androidWebViewIFrame"
      src="#"
    ></iframe>
    <!-- toast 样式 -->
    <div class="android-system-toast-box">
      <div class="label" id="android-text-info">已经到达最顶层！</div>
    </div>

    <script>
      const IFRAME_SRC = "http://suzamdsltlab002:8095/dispatchApp/#";
      //  const IFRAME_SRC = "http://10.0.2.2:5189/";
      // const IFRAME_SRC = "http://192.168.1.117:5189/";
      // const IFRAME_SRC = "./ui/index.html";

      let timeoutId = null;

      function refreshWinPage() {
        let iframe = document.querySelector("#androidWebViewIFrame");
        const src =
          IFRAME_SRC +
          (IFRAME_SRC.indexOf("?") > 0 ? `&` : `?`) +
          `v=${new Date().getTime()}`;
        iframe.setAttribute("src", src);

        /**自检查是否重新加载页面*/
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          const iframe = document.querySelector("#androidWebViewIFrame");
          try {
            let _doc = iframe.contentWindow.document;
            const title = _doc.getElementsByTagName("title");
            clearTimeout(timeoutId);
            if (!title || title.length <= 0) {
              window.location.href = "./error.html";
              return;
            }
            initAno();
          } catch (e) {}
        }, 3000);
      }
      function initAno() {
        try {
          if (
            document.querySelector("#androidWebViewIFrame").contentWindow
              .androidJS
          ) {
            return;
          }
          document.querySelector(
            "#androidWebViewIFrame"
          ).contentWindow.androidJS =
            typeof androidJS == "undefined"
              ? {
                  executeMethod: function (router, method, params) {
                    console.log(
                      `router:${router}  \r\t method:${method} \r\t params:${params}\r\n `
                    );
                  },
                }
              : androidJS;
        } catch (e) {
          alert(
            "设置依赖参数失败，当前页面仅供android使用，请使用特定的android设备使用。如果继续使用将会有部分功能不能使用！"
          );
        }
      }

      refreshWinPage();

      setTimeout(() => {
        initAno();
      }, 200);

      document.querySelector("#androidWebViewIFrame").addEventListener(
        "load",
        (e) => {
          initAno();
        },
        false
      );
     
    </script>
  </body>
</html>
